@import (reference) "../../../color.less";
@import (reference) "../trade-common.less";
.trade-market(@title-bar-background-color, @main-font-color, @second-font-color) {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: @title-bar-background-color;
  height: @top-module-height;
  color: @main-font-color;
  transition: all .2s;
  .trade-market-select {
    height: 100%;
    margin-left: 30px;
    .trade-market-select-text-container {
      border: none;
      font-size: 18px;
      width: auto;
      padding: 0;
    }
  }
  .trade-market-last-price {
    display: inline-block;
    margin-left: 30px;
    font-size: 20px;
    font-family: Arial, serif;
    &[datatype="up"] {
      color: @main-green-color
    }
    &[datatype="low"] {
      color: @main-red-color
    }
  }
  .trade-market-item {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    color: @second-font-color;
    font-size: 12px;
    margin-left: 16px;
    .trade-market-item-value {
      display: inline-block;
      color: @main-font-color;
      font-family: Arial, serif;
      &[datatype="up"] {
        color: @main-green-color
      }
      &[datatype="low"] {
        color: @main-red-color
      }
    }
  }
}

.trade-market-night {
  .trade-market(
    @title-bar-background-color-night,
    @main-font-color-night,
    @second-font-color-night
  )
}

.trade-market-day {
  .trade-market(
    @title-bar-background-color-day,
    @main-font-color-day,
    @second-font-color-day
  )
}
